<template>
  <div class="container">
    <normal-title
      title='我的分销'
      :back="true"
    ></normal-title>
    <div class="session">
      <div class="row between">
        <div class="row">
          <div class="title">时间</div>
          <picker
            class="picker"
            mode="date"
            start="2018-01-01"
            end="2099-01-01"
            @change="dateStartChange"
          >{{dateStart}}<span>▼</span></picker>
          <div>&nbsp;-&nbsp;</div>
          <picker
            class="picker"
            mode="date"
            start="2010-01-01"
            end="2030-01-01"
            @change="dateEndChange"
          >{{dateEnd}}<span>▼</span></picker>
        </div>
        <div class="row">
          <div class="title">状态</div>
          <!-- <div class="picker">已付款<span>▼</span></div> -->
          <picker
            class="picker"
            @change="pickerChange"
            :value="statusIndex"
            :range="proStatus"
          >
            {{proStatus[statusIndex]}}<span>▼</span>
          </picker>
        </div>
      </div>
      <div class="row">
        <div class="title price">完成金额 : <span class="price-icon">￥</span><span class="price-val">{{totalFee}}</span>
        </div>
        <div class="title price">佣金总额 : <span class="price-icon">￥</span><span class="price-val">{{commissionFee}}</span>
        </div>
      </div>
    </div>
    <div class="slice"></div>
    <div class="session">
      <div
        class="row between list"
        id="keys"
      >
        <div>产品图</div>
        <div>用户名</div>
        <div>优惠券码</div>
        <div>状态</div>
        <div>金额</div>
        <div>佣金</div>
      </div>
      <a
        v-for="(item,index) in activedInfo"
        :key="index"
        hover-class="none"
        :href="'/pages/salesOrderDetail/main?order_id='+item.id+'&openid='+item.openid"
        class="row between list"
      >
        <div>
          <img
            class="thumb"
            :src="item.image"
            mode="aspectFit"
          >
        </div>
        <div>{{item.nickname}}</div>
        <div>{{item.code}}</div>
        <div>{{orderStatus[item.order_status]}}</div>
        <div>{{item.payment}}</div>
        <div class="del">{{item.commission}}</div>
      </a>
    </div>
    <bottom-btn />
  </div>
</template>

<script>
import NormalTitle from "@/components/NormalTitle";
import BottomBtn from "@/components/BottomBtn";
import { request, formatTime } from "@/utils";
import config from "@/config";
export default {
  components: {
    NormalTitle,
    BottomBtn
  },
  data() {
    return {
      activedInfo: null,
      totalFee: 0,
      commissionFee: 0,
      page: 1,
      hasMore: true,
      dateStart: "2018-12-01",
      dateEnd: "2018-12-31",
      proStatus: [
        "全部",
        "待支付",
        "待发货",
        "待自提",
        "待收货",
        "已完成",
        "已取消",
        "退款中"
      ],
      statusIndex: 0,
      orderStatus: config.orderStatus
    };
  },
  methods: {
    dateStartChange(e) {
      this.dateStart = e.mp.detail.value;
      this.getActivedInfo(true);
    },
    dateEndChange(e) {
      this.dateEnd = e.mp.detail.value;
      this.getActivedInfo(true);
    },
    pickerChange(e) {
      this.statusIndex = e.mp.detail.value;
      this.getActivedInfo(true);
    },
    async getActivedInfo(init) {
      if (init) {
        this.page = 1;
        this.hasMore = true;
      }
      var data = {
        page: this.page,
        perPage: 10,
        start_time: this.dateStart,
        end_time: this.dateEnd
      };
      // 订单状态(0/待支付,1/已付款,2/到付,3/已发货,4/已签收,5/已退回,6/已取消,7/退回中,8/已退款,9/部分退款,10/已作废,11/待自提,12/待收货,13/已完成,14/待发货,15/退款中,16/支付失败)
      var orderStatusCode = [undefined, 0, 14, 11, 12, 13, 6, 15];
      if (this.statusIndex > 0) {
        data.order_status = orderStatusCode[this.statusIndex];
      }
      var result = await request("/v1/order/get-sales-order", "get", data);
      this.totalFee = result.data.total_fee;
      this.commissionFee = result.data.commission_fee;
      if (result.data) {
        if (init) {
          this.activedInfo = result.data.items;
        } else {
          this.activedInfo = this.activedInfo.concat(result.data.items);
        }
        if (result.data.items.length === 0) {
          this.hasMore = false;
        }
      }
    }
  },
  mounted() {
    this.getActivedInfo(true);
  },
  async onReachBottom() {
    if (!this.hasMore) {
      return;
    }
    this.page += 1;
    this.getActivedInfo();
  }
};
</script>

<style>
page {
  height: 100%;
}
</style>

<style scoped lang="scss">
.container {
  font-size: 24rpx;
  color: #6d6d6d;
  .session {
    margin: 0 25rpx;
    .title {
      color: #000;
      font-size: 28rpx;
      margin-right: 20rpx;
      font-weight: 500;
    }
    .picker {
      background-color: #f6f6f6;
      padding: 8rpx 15rpx;
      font-size: 20rpx;
      border-radius: 10rpx;
      span {
        display: inline-block;
        font-size: 18rpx;
        margin-left: 15rpx;
      }
    }
    .price {
      margin-top: 15rpx;
      .price-icon {
        font-size: 24rpx;
        color: #b93a39;
        font-weight: 600;
      }
      .price-val {
        color: #b93a39;
        font-size: 38rpx;
        font-weight: 600;
      }
    }
    #keys {
      font-size: 28rpx;
      color: #000;
      font-weight: 500;
    }
    .list {
      margin: 25rpx 0;
      font-size: 22rpx;
      .thumb {
        width: 100rpx;
        height: 100rpx;
        border-radius: 15rpx;
      }
      div {
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        // border: 1rpx solid #000;
      }
      div:nth-child(1) {
        width: 100rpx;
      }
      div:nth-child(2) {
        width: 130rpx;
      }
      div:nth-child(3) {
        width: 160rpx;
      }
      div:nth-child(4) {
        width: 80rpx;
      }
      div:nth-child(5) {
        width: 100rpx;
      }
      div:nth-child(6) {
        width: 100rpx;
      }
      .del {
        color: #d5bf94;
        font-size: 24rpx;
      }
    }
  }
}
</style>




